<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--360浏览器优先以webkit内核解析-->


    <title> - 主页示例</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-10">
                <div class="row">
                    <div class="col-sm-5">
                        <div class="ibox float-e-margins">
                            <div class="full-height-scroll">
                                <div id="vertical-timeline" class="vertical-container light-timeline">
                                </div>
                            </div>
                            <div class="text-center float-e-margins p-md">
                                <a class="btn btn-ms btn-primary" onclick="nextPlanePage()">上一页</a>
                                <a class="btn btn-ms btn-primary" onclick="plane_list(1,5)">刷新</a>
                                <a class="btn btn-ms btn-primary" onclick="lastPlanePage()">下一页</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <div class="ibox">
                            <div class="ibox-title">
                                <h5>所有任务</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="row m-b-sm m-t-sm">
                                    <div class="col-md-1">
                                        <button type="button" id="loading-example-btn" class="btn btn-white btn-sm"
                                            onclick="task_list(1,10)"><i class="fa fa-refresh"></i>
                                            刷新</button>
                                    </div>
                                    <div class="col-md-11">
                                        <div class="input-group">
                                            <input type="text" placeholder="请输入项目名称" class="input-sm form-control" id="search-ipt"> 
                                            <span class="input-group-btn">
                                                <button type="button" class="btn btn-sm btn-primary" onclick="search_task_index()"> 搜索</button>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="project-list">
                                    <table class="table table-hover" id="table-hover">

                                    </table>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-white" onclick="nextPage()" id="nextbtn"><i
                                            class="fa fa-chevron-left"></i>
                                    </button>
                                    <button type="button" class="btn btn-white" onclick="lastPage()" id="lastbtn"><i
                                            class="fa fa-chevron-right"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>项目成员列表</h5>
                    </div>
                    <div class="text-center float-e-margins p-md">
                            <a class="btn btn-xs btn-default" onclick="nextMemberPage()">上一页</a>
                            <a class="btn btn-xs btn-default" onclick="member_list(1,20)">刷新</a>
                            <a class="btn btn-xs btn-default" onclick="lastMemberPage()">下一页</a>
                        </div>
                    <div class="ibox-content">
                        <ul class="todo-list m-t small-list ui-sortable" id="member-list">

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/plugins/layer/layer.min.js"></script>
    <script src="js/plugins/jquery/search.js"></script>
    <!-- Flot -->
    <script src="js/plugins/flot/jquery.flot.js"></script>
    <script src="js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="js/plugins/flot/jquery.flot.pie.js"></script>
    <!-- 自定义js -->
    <script src="js/content.js"></script>
    <script type="text/javascript" src="js/host.js"></script>
    <!--flotdemo-->
    <script type="text/javascript">
        var page = 1;
        var size = 10;
        var totalPage = 0;
        var totalSize = 0;
        var have_next = false;

        var plane_page = 1;
        var plane_size = 5;
        var plane_totalPage = 0;
        var plane_totalSize = 0;
        var plane_have_next = false;

        var member_page = 1;
        var member_size = 20;
        var member_totalPage = 0;
        var member_totalSize = 0;
        var member_have_next = false;
        // 上一页
        function nextPage() {
            page -= 1;
            if (page < 1) {
                page += 1;
            }
            task_list(page, size);
        }

        //下一页
        function lastPage() {
            page += 1;
            if (page > totalPage) {
                page -= 1;
            }
            task_list(page, size);
        }

        // 上一页
        function nextMemberPage() {
            member_page -= 1;
            if (member_page < 1) {
                member_page += 1;
            }
            member_list(member_page, member_size);
        }

        //下一页
        function lastMemberPage() {
            member_page += 1;
            if (member_page > member_totalPage) {
                member_page -= 1;
            }
            member_list(member_page, member_size);
        }

        // 上一页
        function nextPlanePage() {
            plane_page -= 1;
            if (plane_page < 1) {
                plane_page += 1;
            }
            plane_list(plane_page, plane_size);
        }

        //下一页
        function lastPlanePage() {
            plane_page += 1;
            if (plane_page > plane_totalPage) {
                plane_page -= 1;
            }
            plane_list(plane_page, plane_size);
        }

        function plane_list(page, size) {
            $.ajax({
                type: "POST",
                url: localhost + "/plane/planeListInProject",
                data: '{ "page": ' + page + ', "size": ' + size + '}',
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                success: function (data) {
                    if (data["response_msg"] == "success") {
                        plane_totalPage = data["response_data"]["total_page"];
                        plane_totalSize = data["response_data"]["total_size"];
                        $('#vertical-timeline').empty();
                        var html = '';
                        $.each(data["response_data"]["data"], function (commentIndex, comment) {
                            if(comment["flag"].indexOf("开会") != -1 ){
                                html += '<div class="vertical-timeline-block"> <div class="vertical-timeline-icon navy-bg"> <i class="fa fa-briefcase"></i> </div> <div class="vertical-timeline-content"> <h2>' + comment["user_name"] + '</h2> <p>' + comment["flag"] + '</p> <span class="vertical-date"> 今天 <br> <small>' + comment["start_time"] + '</small> </span> </div> </div>';
                            }else if(comment["flag"].indexOf("完成") != -1 ){
                                html += '<div class="vertical-timeline-block"> <div class="vertical-timeline-icon lazur-bg"> <i class="fa fa-briefcase"></i> </div> <div class="vertical-timeline-content"> <h2>' + comment["user_name"] + '</h2> <p>' + comment["flag"] + '</p> <span class="vertical-date"> 今天 <br> <small>' + comment["start_time"] + '</small> </span> </div> </div>';
                            }else if(comment["flag"].indexOf("报告") != -1 ){
                                html += '<div class="vertical-timeline-block"> <div class="vertical-timeline-icon yellow-bg"> <i class="fa fa-briefcase"></i> </div> <div class="vertical-timeline-content"> <h2>' + comment["user_name"] + '</h2> <p>' + comment["flag"] + '</p> <span class="vertical-date"> 今天 <br> <small>' + comment["start_time"] + '</small> </span> </div> </div>';
                            }else if(comment["flag"].indexOf("电话") != -1 ){
                                html += '<div class="vertical-timeline-block"> <div class="vertical-timeline-icon yellow-bg"> <i class="fa fa-briefcase"></i> </div> <div class="vertical-timeline-content"> <h2>' + comment["user_name"] + '</h2> <p>' + comment["flag"] + '</p> <span class="vertical-date"> 今天 <br> <small>' + comment["start_time"] + '</small> </span> </div> </div>';
                            }else if(comment["flag"].indexOf("休息") != -1 ){
                                html += '<div class="vertical-timeline-block"> <div class="vertical-timeline-icon lazur-bg"> <i class="fa fa-briefcase"></i> </div> <div class="vertical-timeline-content"> <h2>' + comment["user_name"] + '</h2> <p>' + comment["flag"] + '</p> <span class="vertical-date"> 今天 <br> <small>' + comment["start_time"] + '</small> </span> </div> </div>';
                            }else{
                                html += '<div class="vertical-timeline-block"> <div class="vertical-timeline-icon blue-bg"> <i class="fa fa-briefcase"></i> </div> <div class="vertical-timeline-content"> <h2>' + comment["user_name"] + '</h2> <p>' + comment["flag"] + '</p> <span class="vertical-date"> 今天 <br> <small>' + comment["start_time"] + '</small> </span> </div> </div>';
                            }
                        });
                        $('#vertical-timeline').html(html);
                    }
                }
            });
        }

        function member_list(page, size) {
            $.ajax({
                type: "POST",
                url: localhost + "/project/projectGroupListPerson",
                data: '{ "page": ' + page + ',"size": ' + size + '}',
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                success: function (data) {
                    if (data["response_msg"] == "success") {
                        totalPage = data["response_data"]["total_page"];
                        totalSize = data["response_data"]["total_size"];
                        $('#member-list').empty();
                        var html = '';
                        $.each(data["response_data"]["data"], function (commentIndex, comment) {
                            if (comment["company_post"] == 3) { html += '<li> <label>' + comment["user_name"] + '<small class="label label-default"><i class="fa fa-flag"></i></small></label> </li>' }
                            else if (comment["company_post"] == 2) { html += '<li> <label>' + comment["user_name"] + '<small class="label label-default"><i class="fa fa-flag-o"></i></small></label> </li>' }
                            else { html += '<li> <label>' + comment["user_name"] + '<small class="label label-default"><i class="fa fa-user"></i></small></label> </li>' }
                        });
                        $('#member-list').html(html);
                    }
                }
            });
        }

        function task_list(page, size) {
            $.ajax({
                type: "POST",
                url: localhost + "/task/taskList",
                data: '{ "page": ' + page + ', "size": ' + size + '}',
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                success: function (data) {
                    if (data["response_msg"] == "success") {
                        totalPage = data["response_data"]["total_page"];
                        totalSize = data["response_data"]["total_size"];
                        $('#table-hover').empty();
                        var html = '<tbody>';
                        $.each(data["response_data"]["data"], function (commentIndex, comment) {
                            html += '<tr>';
                            if (comment["status"] == 0) {
                                html += '<td class="project-status"><span class="label label-primary">准备中</td>';
                            } else if (comment["status"] == 1) {
                                html += '<td class="project-status"><span class="label label-primary">进行中</td>';
                            } else if (comment["status"] == 2) {
                                html += '<td class="project-status"><span class="label label-primary">暂停</td>';
                            } else if (comment["status"] == 3) {
                                html += '<td class="project-status"><span class="label label-primary">完成</td>';
                            } else if (comment["status"] == 4) {
                                html += '<td class="project-status"><span class="label label-primary">取消</td>';
                            }

                            html += '<td class="project-title"><a >' + comment['content'] + '</a><br /><small>创建于 ' + comment['start_date'] + '</small></td>'
                            html += '<td class="project-completion"><small>当前进度： '+comment["process"]+'%</small><div class="progress progress-mini"><div style="width: '+comment["process"]+'%;" class="progress-bar"></div></div></td>'
                            html += '<td class="project-people"><h4>负责人:</h4><small>' + comment["leader"] + '<small></a></td>'
                            //html += '<td class="project-actions"><button type="button" onclick="project_detail(' + comment["id"] + ')" class="btn btn-white btn-sm" data-toggle="modal" data-target="#infoProject"><i class="fa fa-folder"></i>查看</button><button type="button"  onclick="project_edit_init(' + comment["id"] + ')" class="btn btn-white btn-sm" data-toggle="modal" data-target="#editProject"><i class="fa fa-pencil"></i>编辑 </button></td>'
                            html += '</tr>';
                        });
                        html += '</tbody>'
                        $('#table-hover').html(html);
                    }
                }
            });
        }

        $(function () {
            var container = $("#flot-line-chart-moving");
            var maximum = container.outerWidth() / 2 || 300;
            var data = [];

            plane_list(1, 5)
            task_list(1, 10);
            member_list(1, 20);

        });
    </script>
</body>

</html>